<template>
  <div class="satisfaction">
    <h5 class="title">关键词设置</h5>
    <el-form class="keywordSettingForm" size="mini" :model="keywordSetting"
      ref="keywordSetting" label-position="top">
      <el-form-item size="mini">
        <span slot="label">
          访客关键词
         <el-tooltip content="访客关键词用于提示座席重点关注词汇，当会话中出现关键词时，将以所选颜色重点标注（多个关键词请用英文逗号隔开）" placement="top">
          <i style="font-size:12px;color:#B3B9C7;padding-right:6px;cursor:pointer" class="V7_iconfont V7_iconV7tubiao_bangzhu-42"></i>
         </el-tooltip>
          <el-switch
            style="marginLeft: 5px"
            v-model="keywordSetting.visitorFocusWordsFlag">
          </el-switch>
        </span>
        <el-input
            type="textarea"
            :rows="2"
            resize='none'
            placeholder="多个关键词请用英文逗号隔开"
            v-model="keywordSetting.visitorFocusWords">
        </el-input>
        <div class="colorLogo">
          标识颜色
          <el-color-picker class="colorStyle" v-model="keywordSetting.visitorFocusWordsColor"></el-color-picker>
        </div>
      </el-form-item>
      <el-form-item size="mini" class="line">
        <span slot="label">
          座席关键词
          <el-tooltip content="座席关键词用于提示访客重点关注词汇，当会话中出现关键词时，将以所选颜色重点标注（多个关键词请用英文逗号隔开）" placement="top">
            <i style="font-size:12px;color:#B3B9C7;padding-right:6px;cursor:pointer" class="V7_iconfont V7_iconV7tubiao_bangzhu-42"></i>
          </el-tooltip>
          <el-switch
            style="marginLeft: 5px"
            v-model="keywordSetting.agentFocusWordsFlag">
          </el-switch>
        </span>
         <el-input
            type="textarea"
            :rows="2"
            resize='none'
            placeholder="多个关键词请用英文逗号隔开"
            v-model="keywordSetting.agentFocusWords">
        </el-input>
        <div class="colorLogo">
          标识颜色
          <el-color-picker class="colorStyle" v-model="keywordSetting.agentFocusWordsColor"></el-color-picker>
        </div>
      </el-form-item>
    </el-form>
    <h5 class="title">敏感词设置</h5>
    <el-form class="keywordSettingForm" size="mini" :model="sensitiveWordsSetting"
      ref="keywordSetting" label-position="top">
      <el-form-item size="mini">
        <span slot="label">
          访客敏感词
         <el-tooltip content="若访客发送的消息包含以下敏感词，座席收到的消息将用*代替（多个敏感词请用英文逗号隔开）" placement="top">
          <i style="font-size:12px;color:#B3B9C7;padding-right:6px;cursor:pointer" class="V7_iconfont V7_iconV7tubiao_bangzhu-42"></i>
         </el-tooltip>
          <el-switch
            style="marginLeft: 5px"
            v-model="sensitiveWordsSetting.visitorSensitiveWordsFlag">
          </el-switch>
        </span>
        <el-input
            type="textarea"
            :rows="2"
            resize='none'
            placeholder="多个敏感词请用英文逗号隔开"
            v-model="sensitiveWordsSetting.visitorSensitiveWords">
        </el-input>
      </el-form-item>
      <el-form-item size="mini" class="line">
        <span slot="label">
          座席敏感词
          <el-tooltip content="若座席发送的消息包含以下违禁词，该消息发送时，需要座席二次确认，是否发送（多个敏感词请用英文逗号隔开）" placement="top">
            <i style="font-size:12px;color:#B3B9C7;padding-right:6px;cursor:pointer" class="V7_iconfont V7_iconV7tubiao_bangzhu-42"></i>
          </el-tooltip>
          <el-switch
            style="marginLeft: 5px"
            v-model="sensitiveWordsSetting.agentSensitiveWordsFlag">
          </el-switch>
        </span>
         <el-input
            type="textarea"
            :rows="2"
            resize='none'
            placeholder="多个敏感词请用英文逗号隔开"
            v-model="sensitiveWordsSetting.agentSensitiveWords">
        </el-input>
      </el-form-item>
    </el-form>
    <div class="btn fr">
      <el-button type="primary" size="mini" @click="saveFun">保存</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import { BasicModule } from '@/store/modules/config/basic'
@Component({
  name: 'VocabularySet'
})
export default class VocabularySet extends Vue {
    // 关键词设置
    private keywordSetting = {
      visitorFocusWords: '',
      agentFocusWords: '',
      visitorFocusWordsFlag: false,
      agentFocusWordsFlag: false,
      visitorFocusWordsColor: '#FF0000',
      agentFocusWordsColor: '#409EFF'
    }

    // 敏感词设置
    private sensitiveWordsSetting = {
      visitorSensitiveWords: '',
      agentSensitiveWords: '',
      visitorSensitiveWordsFlag: false,
      agentSensitiveWordsFlag: false
    }

    private getWordsSetting () {
      const actionData = { url: '/im-center/action/config/globalSetting/get', method: 'POST', data: {} }
      BasicModule.BasicCommonAction(actionData).then(res => {
        if (res && res.success && res.data) {
          const {
            visitorFocusWords,
            agentFocusWords,
            visitorFocusWordsFlag,
            agentFocusWordsFlag,
            visitorFocusWordsColor,
            agentFocusWordsColor,
            visitorSensitiveWords,
            agentSensitiveWords,
            visitorSensitiveWordsFlag,
            agentSensitiveWordsFlag
          } = res.data
          this.keywordSetting = {
            visitorFocusWords,
            agentFocusWords,
            visitorFocusWordsFlag,
            agentFocusWordsFlag,
            visitorFocusWordsColor,
            agentFocusWordsColor
          }
          this.sensitiveWordsSetting = {
            visitorSensitiveWords,
            agentSensitiveWords,
            visitorSensitiveWordsFlag,
            agentSensitiveWordsFlag
          }
        } else {
          this.keywordSetting = {
            visitorFocusWords: '',
            agentFocusWords: '',
            visitorFocusWordsFlag: false,
            agentFocusWordsFlag: false,
            visitorFocusWordsColor: '#FF0000',
            agentFocusWordsColor: '#409EFF'
          }
          this.sensitiveWordsSetting = {
            visitorSensitiveWords: '',
            agentSensitiveWords: '',
            visitorSensitiveWordsFlag: false,
            agentSensitiveWordsFlag: false
          }
        }
      })
    }

    private saveFun () {
      const {
        visitorFocusWords,
        agentFocusWords,
        visitorFocusWordsFlag,
        agentFocusWordsFlag,
        visitorFocusWordsColor,
        agentFocusWordsColor
      } = this.keywordSetting

      const {
        visitorSensitiveWords,
        agentSensitiveWords,
        visitorSensitiveWordsFlag,
        agentSensitiveWordsFlag
      } = this.sensitiveWordsSetting

      let result = true
      if (agentFocusWordsFlag) {
        if (!agentFocusWordsColor) {
          (this as any).$message.error('请选择座席关键词颜色')
          result = false
        }
      }
      if (visitorFocusWordsFlag) {
        if (!visitorFocusWordsColor) {
          (this as any).$message.error('请选择访客关键词颜色')
          result = false
        }
      }
      const actionData = {
        url: '/im-center/action/config/globalSetting/updateWords',
        method: 'POST',
        data: {
          visitorFocusWords,
          agentFocusWords,
          visitorFocusWordsFlag,
          agentFocusWordsFlag,
          visitorFocusWordsColor,
          agentFocusWordsColor,
          visitorSensitiveWords,
          agentSensitiveWords,
          visitorSensitiveWordsFlag,
          agentSensitiveWordsFlag
        }
      }
      if (result) {
        BasicModule.BasicCommonAction(actionData).then(res => {
          if (res && res.success) {
            (this as any).$message.success('保存成功')
            this.getWordsSetting()
          }
        })
      }
    }

    private mounted () {
      this.getWordsSetting()
    }
}
</script>
<style lang="stylus" scoped>
  .satisfaction
    padding 24px
    border-radius 10px
    height calc(100% - 40px)
    overflow auto
    box-sizing border-box
    margin 0 2px 2px 0
    border 1px solid #ecf0f3
    box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
    .title
      margin-bottom 10px
    .keywordSettingForm
      margin 0 10px
    .setting
      margin-top 40px
    .colorLogo
      margin-top 10px
      font-size 12px
      .colorStyle
        vertical-align middle
</style>
